<template>
  <div>
    <el-row :gutter="20" >
      <!--部门数据-->
      <el-col :span="5" :xs="24">
        <div class="head-container el_tree_ground">
          <el-input v-model="deptName" placeholder="请输入部门名称" clearable size="small" prefix-icon="el-icon-search"
            style="margin-bottom: 20px" />
        </div>
        <div class="head-container" style="width: 100%;height:600px;overflow:hidden;">
          <el-tree
			style="width: 106%; height:100%;overflow:auto;overflow-x:hidden;"
			node-key="id"
			:default-expanded-keys="[1]"
			:data="deptOptions"
            :props="defaultProps"
            :expand-on-click-node="false"
            :filter-node-method="filterNode"
            ref="tree"
            @node-click="handleNodeClick"
        >
        <!--过长处理，鼠标悬浮文字弹框显示全部内容-->
        <span slot-scope="{ node }">
                  <el-tooltip class="item" effect="light" :content="node.label" placement="top-start" v-if="node.label.length>12">
                    <span > {{ node.label | ellipsis(12) }} </span>
                  </el-tooltip>
                  <span v-if="node.label.length<=12">{{node.label}}</span>
         </span>
        </el-tree>
        </div>
      </el-col>
      <el-col :span="19" :xs="24">
        <el-row>
            <span style="line-height: 40px;">{{parentOrg.orgName}}</span>
            <el-button style="float: right;" icon="el-icon-plus" @click="handleAdd" type="primary"
            v-hasPermi="['labdata:platform:edit']">新增平台</el-button>
        </el-row>
        <div v-if="isPermit('labdata:platform:query')">
        <PlatformCom :childOrg="parentOrg" ref="platform" @refreshTree="getTreeselect" v-if="!parentOrg.orgFunctionOpt" ></PlatformCom>
        </div>
        <div v-if="isPermit('labdata:orgnization:query')">
          <OrgCom :childOrg="parentOrg" ref="orgCom" isInfo @refreshTree="getTreeselect" v-if="parentOrg.orgFunctionOpt" ></OrgCom>
        </div>
        <div v-if="isPermit('labdata:orgSecond:query')">
          <OrgSecondCom :childOrg="parentOrg" ref="secondOrg" v-if="parentOrg.orgFunctionOpt==3" ></OrgSecondCom>
        </div>
        <div v-if="isPermit('labdata:orgThird:query')">
          <OrgThirdCom :childOrg="parentOrg" ref="thirdOrg" v-if="parentOrg.orgFunctionOpt==4" ></OrgThirdCom>
        </div>
        <div v-if="isPermit('labdata:employee:query')">
          <EmployeeCom :childOrg="parentOrg" ref="employee" v-if="parentOrg.orgId>0" ></EmployeeCom>
        </div>
        <div v-if="isPermit('labdata:suborg:query')">
          <SubOrgCom :childOrg="parentOrg" ref="subOrg" v-if="parentOrg.orgFunctionOpt==2||!parentOrg.orgFunctionOpt&&parentOrg.orgId>0" ></SubOrgCom>
          <SubThirdOrgCom :childOrg="parentOrg" ref="subThirdOrg" v-if="parentOrg.orgFunctionOpt==3" ></SubThirdOrgCom>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { platformTree ,getOrgnization,getTreeNode} from "@/api/labdata/orgnization";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  import OrgCom from "@/views/labdata/orgnization/org-com.vue";
  import SubOrgCom from "@/views/labdata/orgnization/sub-org-com.vue";
  import SubThirdOrgCom from "@/views/labdata/orgnization/sub-org-third-com.vue";
  import EmployeeCom from "@/views/labdata/employee/employee-com.vue";
  import OrgSecondCom from "@/views/labdata/orgSecond/org-second-com.vue";
  import OrgThirdCom from "@/views/labdata/orgThird/org-third-com.vue";
  import PlatformCom from "@/views/labdata/platform/platform_com.vue"
  export default {
    name: "Platform",
    components: { Treeselect, OrgCom, EmployeeCom,OrgSecondCom, OrgThirdCom, SubOrgCom, SubThirdOrgCom,PlatformCom},
    data() {
      return {
        permissions:{},
        activeName: 'first',
        // 部门树选项
        deptOptions: [],
        parentOrg:{"orgId":0,"orgName":"国家、省级实验平台"},
        // 部门名称
        deptName: '',
        defaultProps: {
          children: "children",
          label: "label"
        }
      };
    },
    watch: {
      // 根据名称筛选部门树
      deptName(val) {
        this.$refs.tree.filter(val);
      }
    },
    created() {
      this.permissions = this.$store.getters.permissions;
      this.getTreeselect();
    },
    methods: {
      // 筛选节点
      filterNode(value, data) {
        if (!value) return true;
        return data.label.indexOf(value) !== -1;
      },
      isPermit(permitKey){
        if(this.$store.state.user.name=='admin'){
          return true;
        }
        let  permissions = this.$store.getters.permissions;
        return permissions.includes(permitKey);
      },
      // 节点单击事件
      handleNodeClick(data) {
        if(data.orgFunctionOpt){
          getOrgnization(data.id).then(response => {
            this.parentOrg = response.data;
            let treeNode = getTreeNode(this.deptOptions, data.id);
            if(treeNode && treeNode.children && treeNode.children.length>0){
              this.parentOrg.hasChildren = true;
            }
          });
        }else{
          let org = {
            orgId:data.id,
            orgName:data.label
          }
          this.parentOrg = org;
          //console.log(JSON.stringify(this.parentOrg));
        }
      },
      /** 查询部门下拉树结构 */
      getTreeselect() {
        platformTree().then(response => {
          this.deptOptions = response.data;
        });
      },
      handleTabClick(){

      },
      handleAdd(){
        this.$refs["platform"].handleAdd();
      }

    }
  }
</script>
